<template>
  <button
    :class="btnSize + ' ' + type + ' ' + plainClass + ' ' + disabledClass"
    :disabled="disabled"
  >
    <slot name="icon"> </slot>
    <slot></slot>
    <template v-if="loading">
      <slot name="loading"> </slot>
    </template>
  </button>
</template>
<script setup>
import { defineProps, computed, defineExpose } from "vue";

const props = defineProps({
  size: {
    type: String,
    default: "default",
  },
  type: {
    type: String,
    default: "primary",
  },
  plain: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const btnSize = computed(() => {
  return "font" + props.size;
});
const plainClass = computed(() => {
  return "plain" + props.plain;
});

const disabledClass = computed(() => {
  return "disabled" + props.disabled;
});

defineExpose({
  size: props.size,
  type: props.type,
  disabled: props.disabled,
});
</script>
<style scoped>
button {
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
}

.fontlarge {
  font-size: 20px;
}

.fontdefault {
  font-size: 16px;
}

.fontsmall {
  font-size: 12px;
}

.primary {
  border: 1px solid #008bff;
  background-color: #008bff;
  color: #fff;
}

.success {
  border: 1px solid #5cb85c;
  background-color: #5cb85c;
  color: #fff;
}

.warning {
  border: 1px solid #f0ad4e;
  background-color: #f0ad4e;
  color: #fff;
}

.danger {
  border: 1px solid #d9534f;
  background-color: #d9534f;
  color: #fff;
}

.info {
  border: 1px solid #5bc0de;
  background-color: #5bc0de;
  color: #fff;
}

.text {
  border: 1px solid #000;
  background-color: #ffffff;
  color: #000;
}

.plaintrue {
  background: none;
  color: #000;
}

.disabledtrue {
  border: 1px solid #bbb;
  background: #bbb;
  color: #fff;
}
</style>
